﻿<div class="am-g">
    <div class="am-u-sm-7">
        <form id="template_form" data-toggle="validator" role="form" action="@ViewBag.SubmitUrl" class="am-form am-form-h box" enctype="multipart/form-data" style="position:relative;">
            <input type="hidden" id="template_id" name="Id" value="0" />
            <div class="am-form-group">
                <label for="template_sort" class="am-u-sm-2 am-form-label">模板类型</label>
                <div class="am-u-sm-10">
                    <select id="template_sort" name="Sort" class="form-control select2" style="width:100%"><option value="1" selected>网站模板</option><option value="2">后台模板</option></select>
                </div>
            </div>
            <div class="am-form-group">
                <label for="template_pid" class="am-u-sm-2 am-form-label">模板分类</label>
                <div class="am-u-sm-10">
                    <select name="ParentId" id="template_pid" class="form-control select2" style="width:100%">
                        <option value="0" selected>无分类</option>
                    </select>
                </div>
            </div>
            <div class="am-form-group">
                <label for="template_name" class="am-u-sm-2 am-form-label">模板名称</label>
                <div class="am-u-sm-10"><input type="text" name="Name" id="template_name" value="" placeholder="如：用户信息..." required /></div>
            </div>
            <div class="am-form-group">
                <label for="template_code" class="am-u-sm-2 am-form-label">模板代码</label>
                <div class="am-u-sm-10"><input type="text" name="Code" id="template_code" value="" placeholder="用于前台调用，如UserInfo" /></div>
            </div>
            <div class="am-form-group">
                <label for="template_remark" class="am-u-sm-2 am-form-label">模板备注</label>
                <div class="am-u-sm-10"><textarea name="Remark" id="template_remark" value="" placeholder="模板的备注说明信息..." style="min-height:60px"></textarea></div>
            </div>
            <div class="am-form-group" id="icon_vm">
                <label for="template_icon" class="am-u-sm-2 am-form-label">模板图标</label>
                <div class="am-u-sm-8"><input type="text" name="Icon" v-model="icon" id="template_icon" value="circle-o" required /></div>
                <div class="col-sm2-" style="padding-top:4px;padding-right:16px"><i class="am-icon-{{icon}} fa-2x" style="margin-right:8px"></i><a href="/icons.html" target="_blank" class="pull-right">查看图标</a></div>
            </div>
            <div class="am-form-group">
                <label for="template_content" class="am-u-sm-2 am-form-label">模板内容</label>
                <div class="am-u-sm-10">
                    <textarea name="Content" id="template_content" style="min-height:300px"></textarea>
                </div>
            </div>
            <div class="am-form-group" style="text-align:center;">
                <a class="am-btn am-btn-default" style="margin-right:20px" onclick="_template_tree.reset()">重置</a>
                <input type="submit" value="保存模板" class="am-btn am-btn-success" style="padding:8px 30px" />
            </div>
        </form>
    </div>
    <div class="am-u-sm-5">
        <div class="box box-primary direct-chat direct-chat-primary">
            <div class="box-header with-border">
                <h3 class="box-title">模板列表</h3>
            </div>
            <div class="box-body" id="template_tree">
                <tree editor="editor" order="true" checkbox="false" ref="tree"></tree>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var _template_tree;
    $(function () {
        var iconvm = new Vue({
            el: '#icon_vm',
            data: {
                icon: 'circle-o'
            }
        });
        $(document.body).loadTemplate([{ id: 'tree-item-template', url: '/templates/tree.html' }], function () {
            _template_tree = new Vue({
                el: '#template_tree',
                data: {
                    datas: []
                },
                methods: {
                    reset: function() {
                        $('#template_form').resetForm();
                        $('#template_id').val('0');
                    },
                    getSelectData: function (source, datas) {
                        if (!datas) datas = [];
                        var self =this;
                        $(source).each(function () {
                            var item = { id: this.Id, text: this.Text };
                            datas.push(item);
                            if (this.Children && this.Children.length > 0) {
                                //item.children = [];
                                self.getSelectData(this.Children, datas); //item.children
                            }
                        });
                        return datas;
                    },
                    load: function () {
                        var self = this;
                        $.post('@ViewBag.TreeUrl', { open: true }, function (data) {
                            self.$refs.tree.initTrees(data.Children);
                            self.$refs.tree.treeData = data;
                            var data = self.getSelectData(data.Children);
                            select2('#template_pid', { data: data });
                        });
                    }
                },
                events: {
                    reload: function() {
                        this.load();
                    },
                    order: function(data) {
                        $.post('@ViewBag.OrderUrl', data, function (result) {
                            if (result.succ)
                                _template_tree.$refs.tree.load();
                            else
                                alert(result.data);
                        });
                    },
                    edit: function(id) {
                        $.post('@ViewBag.InfoUrl', { id: id }, function (data) {
                            $('#template_form').fill(data);
                            iconvm.icon = data.Icon;
                        });
                    },
                    del: function (id) {
                        if (confirm("确定删除？")) {
                            $.post('@ViewBag.DelUrl', { id: id }, function (result) {
                                if (result.succ) {
                                    alert("删除成功！");
                                    _template_tree.$refs.tree.load();
                                } else {
                                    alert(result.data);
                                }
                            })
                        }
                    }
                }
            });
        });
        $('#template_form').asyncSubmit(function (result) {
            _template_tree.$refs.tree.load();
            _template_tree.reset();
            alert("保存成功");
        });
        setNav('模板管理');
    });
</script>